import request from '@/request.js'
import config from '@/config.js'

import imageShow from '@/components/imageShow/imageShow.vue'
import sideLayout from '@/components/sideLayout/sideLayout.vue'

export default {
  name: 'tilesetManage',
  components: {
    imageShow,
    sideLayout
  },
  data () {
    return {
      isLoading: true,
      isImageLoading: false,
      // tileset数据
      tilesetsData: [],
      tilesetSelected: '',
      // 图集图片数据
      tilesetImagesData: null,
      tilesetImagesSelected: [],
      isImagesAllSelected: false,
      
      // 以下为创建新tileset的数据
      createModal: false,
      createLoading: false,
      createForm: {
        // 图集名称设置
        tileset: '',
        // 图集单元的宽高与图集列数
        width: 32,
        height: 32,
        colNum: 8,        
      },
      // 验证
      createValidate: {
        tileset: [
          { required: true, message: '不得为空', trigger: 'blur' }
        ],
        width: [
          { type: 'number', required: true, message: '不得为空', trigger: 'blur' }
        ],
        height: [
          { type: 'number', required: true, message: '不得为空', trigger: 'blur' }
        ],
        colNum: [
          { type: 'number', required: true, message: '不得为空', trigger: 'blur' }
        ]
      },
      
      // 上传图块
      tilesetUploadModal: false,
      tilesetUploadApi: config.apiPath + 'addTilesetImages',
      // 最小图片尺寸
      minImageSize: 32,
    }
  },
  computed: {
    uploadTilesetData () {
      return { tileset: this.tilesetSelected }
    },
    
    tilesetRowNum () {
      if (this.tilesetImagesData) {
        return Math.ceil(this.tilesetImagesData.list.length / this.tilesetImagesData.colNum)
      }
      return 0
    },
    
    tilesetRow () {
      return (row) => {
        if (this.tilesetImagesData) {
          return this.tilesetImagesData.list.filter((tile, index) => {
            const colNum = this.tilesetImagesData.colNum
            if (index >= (row - 1) * colNum && index < row * colNum) {
              return true
            }
            return false
          })
        }
        return []
      }
    },
    
    tilesetImagesStyle () {
      if (this.tilesetImagesData) {
        const colNum = this.tilesetImagesData.colNum
        let width = this.tilesetImagesData.itemWidth
        if (width < this.minImageSize) {
          width = this.minImageSize
        }
        return {
          width: (colNum * width + 40) + 'px'
        }
      }
      return {}
    },
    
    tilesetImageStyle () {
      if (this.tilesetImagesData) {
        let width = this.tilesetImagesData.itemWidth
        if (width < this.minImageSize) {
          width = this.minImageSize
        }
        return {
          width: width + 'px',
        }
      }
      return {}
    },
    
    showSize () {
      if (this.tilesetImagesData) {
        return this.tilesetImagesData.itemWidth + 'x' + this.tilesetImagesData.itemHeight + ' ' + this.tilesetImagesData.colNum + '列'
      }
      return ''
    }
  },
  methods: {
    // Tileset创建触发
    createHandler () {
      this.createModal = true
      this.createForm.tileset = ''
    },
    
    // 更新Tileset数据
    updateTilesetData (selected, list) {
      this.tilesetSelected = selected
      this.tilesetsData = list
    },
    
    // 改选Tileset
    changeTileset (tileset) {
      // 已选中的图片列表清空
      this.tilesetImagesData = null
      this.tilesetImagesSelected = []
      if (tileset !== '') {
        this.isImageLoading = true
        request.getTilesetImages(tileset).then((data) => {
          this.tilesetImagesData = data
          this.tilesetImagesSelected = this.initImagesSelected()
          this.isImageLoading = false
          this.$Notice.success({
            title: '获取图集详细成功'
          })
        })
        .catch((err) => {
          console.log(err)
          this.isImageLoading = false
          this.$Notice.error({
            title: '获取图集详细出错'
          })
        })        
      }
    },
    
    // 初始化图集选项数据
    initImagesSelected (sign = false) {
      let result = []
      for (let i = 0; i < this.tilesetRowNum; i++) {
        result.push(sign)
      }
      return result
    },
    
    createTileset () {
      this.$refs.createForm.validate((res) => {
        if (res) {
          if (this.tilesetsData.indexOf(this.createForm.tileset) >= 0) {
            this.$Notice.error({
              title: '不得添加重名图集'
            })
          }
          else {
            this.createLoading = true
            request.addTileset(this.createForm).then((res) => {
              this.$Notice.success({
                title: '新增图集成功'
              })
              this.tilesetsData.push(this.createForm.tileset)
              this.createModal = false
              this.createLoading = false
            })
            .catch((err) => {
              console.log(err)
              this.$Notice.error({
                title: '新增图集出错'
              })
              this.createLoading = false
            })            
          }
        }
      })
    },
    
    tilesetUploadHandler () {
      if (this.tilesetsData.indexOf(this.tilesetSelected) < 0) {
        this.$Notice.error({
          title: '请选择一个图集'
        })
        return
      }
      this.tilesetUploadModal = true
      this.$refs.tilesetUpload.clearFiles()
    },
    
    tilesetUploadSuccess (res) {
      // 文件上传接口返回图片路径
      this.$Notice.success({
        title: '添加图集成功'
      })
      // 文件上传接口返回图片路径
      this.tilesetImagesData = res
    },
    
    // 删除图集图片
    deleteTilesetImages () {
      if (this.tilesetsData.indexOf(this.tilesetSelected) < 0) {
        this.$Notice.error({
          title: '请选择一个图集'
        })
        return
      }
      
      if (this.tilesetImagesSelected.indexOf(true) < 0) {
        this.$Notice.error({
          title: '请至少选择一行图块'
        })
        return
      }
      
      this.$Modal.confirm({
        title: '删除图块',
        content: '是否删除选中行的图块: ' + name,
        loading: true,
        onOk: () => {
          const len = this.tilesetImagesSelected.length
          // 获取删除图片列表
          let deleteList = []
          for (let i = 0; i < len; i++) {
            if (this.tilesetImagesSelected[i]) {
              let rowImages = this.tilesetImagesData.list.filter((tile, index) => {
                const colNum = this.tilesetImagesData.colNum
                if (index >= i * colNum && index < (i + 1) * colNum) {
                  return true
                }
                return false
              })
              deleteList = deleteList.concat(rowImages)
            }
          }
          // 删除
          request.deleteTilesetImages(this.tilesetSelected, deleteList).then((data) => {
            this.$Notice.success({
              title: '删除图块成功'
            })
            // 返回新的图集数据
            this.tilesetImagesData = data
            this.tilesetImagesSelected = this.initImagesSelected()
            this.$Modal.remove()
          })
          .catch((err) => {
            console.log(err)
            this.$Notice.error({
              title: '删除图块出错'
            })
            this.$Modal.remove()
          })
        }
      })
    },
    
    selectAllHandler (res) {
      this.tilesetImagesSelected = this.initImagesSelected(res)
    }
  },
  
  created () {
    request.getTileset().then((data) => {
      this.tilesetsData = data
      this.isLoading = false
      this.$Notice.success({
        title: '获取图集信息成功'
      })
    })
    .catch((err) => {
      console.log(err)
      this.$Notice.error({
        title: '获取图集信息出错'
      })
    })
  }
}